import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Carousel, Radio, DatePicker, Button, message, Input } from 'antd';
import 'antd/dist/reset.css';
import moment from 'moment';
console.log(moment);

function BaZi() {
  const navigate = useNavigate();
  console.log(navigate);
  
  const [gender, setGender] = useState('男');
  const [birthDate, setBirthDate] = useState(null);
  const [name, setName] = useState(''); // 新增姓名状态

  const handleSubmit = () => {
    if (!name) {
      message.error('请输入姓名！');
      return
    }
    if (!birthDate) {
      message.error('请选择出生日期！');
      return;
    }
    message.success(
      `提交成功！姓名：${name}，性别：${gender}，出生日期：${birthDate.format('YYYY-MM-DD')}`
    );
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: '#f1c588',
          width: '600px',
          margin: '0 auto',
          paddingBottom: '60px',
          backgroundImage:
            'url(https://zx.tengzhihh.com/baziyinyuan/static/banner.c68f2559.jpg?x-oss-process=image/format,webp)',
          backgroundSize: '100% auto',
          backgroundPosition: 'center top',
          backgroundRepeat: 'no-repeat',
          position: 'relative',
        }}
      >
        {/* 轮播图 */}
        <Carousel
          autoplay
          autoplaySpeed={2000}
          effect="fade"
          style={{
            width: '100%',
            position: 'relative',
            zIndex: 1,
          }}
        >
          <div>
            <img
              src="https://img-fe.tengzhihh.com/image/2e59c3bf3ba445-594x620.png?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
          </div>
          <div>
            <img
              src="https://img-fe.tengzhihh.com/image/f1649d7e9bb4a5-594x620.png?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
          </div>
        </Carousel>

        {/* 表单区域 */}
        <div
          style={{
            width: '100%',
            marginTop: '20px',
            backgroundImage:
              'url(https://zx.tengzhihh.com/baziyinyuan/static/form_bg.0a8fd946.png)',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
            padding: '60px 40px', // 增加内边距，匹配截图
            position: 'relative',
            zIndex: 1,
          }}
        >
          {/* 标题 */}
          <div
            style={{
              textAlign: 'center',
              fontSize: '18px',
              color: '#666',
              marginBottom: '20px',
            }}
          >
            情侣人所需信息
          </div>

          {/* 姓名输入框 */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '20px',
            }}
          >
            <span
              style={{
                color: '#ff4d4f',
                fontSize: '16px',
                marginRight: '10px',
                width: '150px', // 固定宽度，确保对齐
                textAlign: 'right',
              }}
            >
              您的姓名
            </span>
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="请输入您的姓名"
              style={{
                width: '300px',
                borderRadius: '5px',
                border: '1px solid #ff4d4f',
              }}
            />
          </div>

          {/* 性别选择 */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '20px',
            }}
          >
            <span
              style={{
                color: '#ff4d4f',
                fontSize: '16px',
                marginRight: '10px',
                width: '150px',
                textAlign: 'right',
              }}
            >
              您的性别
            </span>
            <Radio.Group
              value={gender}
              onChange={(e) => setGender(e.target.value)}
              style={{ display: 'flex', gap: '20px' }}
            >
              <Radio value="男">
                <span style={{ color: '#ff4d4f' }}>男</span>
              </Radio>
              <Radio value="女">
                <span style={{ color: '#ff4d4f' }}>女</span>
              </Radio>
            </Radio.Group>
          </div>

          {/* 出生日期 */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '30px',
            }}
          >
            <span
              style={{
                color: '#ff4d4f',
                fontSize: '16px',
                marginRight: '10px',
                width: '150px',
                textAlign: 'right',
              }}
            >
              出生日期 公(阳)历
            </span>
            <DatePicker
              value={birthDate}
              onChange={(date) => setBirthDate(date)}
              placeholder="1990年7月1日 时辰未知"
              style={{
                width: '300px',
                borderRadius: '5px',
                border: '1px solid #ff4d4f',
              }}
              format="YYYY年MM月DD日"
            />
          </div>

          {/* 立即测算按钮 */}
          <div style={{ textAlign: 'center' }}>
            <Button
              onClick={handleSubmit}
              style={{
                width: '300px', // 增大按钮宽度
                height: '60px', // 增大按钮高度
                backgroundImage:
                  'url(https://zx.tengzhihh.com/baziyinyuan/static/btn.4d8b3aae.png?x-oss-process=image/format,webp)',
                backgroundSize: '100% 100%',
                border: 'none',
                cursor: 'pointer',
              }}
            />
          </div>
        </div>
            <div>
            <img
              src="https://img-fe.tengzhihh.com/image/111757080fd5cbc6df0c8d5853d3f663-750x657.png?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
           
            <div>
            <img
              src="https://fe-img.tengzhihh.com/image/90397479a352a03519990b26bb4aae97-750x905.jpg?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
            <div>
            <img
              src="https://img-fe.tengzhihh.com/image/f038c6875a85a29ec79d69191bb25c67-750x541.png?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
             <div>
             <img
              src="https://img-fe.tengzhihh.com/image/ab8dcf7e34c19e-750x537.jpg?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
             </div>
            <div>
            <img
              src="https://img-fe.tengzhihh.com/image/39c8fbcab92799-750x488.jpg?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
            <div>
            <img
              src="https://img-fe.tengzhihh.com/image/02c2e8cd00925e-750x442.jpg?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
             <div style={{position: 'relative'}}>
             <img
              src="https://img-fe.tengzhihh.com/image/e41fe1450222b2-750x412.jpg?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto',zIndex: 1 }}
            />
            <img
              src="https://zx.tengzhihh.com/baziyinyuan/static/trend.e85ec496.gif"
              alt=""
              style={{ width: '100%', height: 'auto',zIndex: 2, position:"absolute", top: 0,left: 0 }}
            />
             </div>
             <div>
            <img
              src="https://img-fe.tengzhihh.com/image/f87d3a2379ed61-590x512.png?x-oss-process=image/format,webp"
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
            <div>
            <img
              src=""
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
            <div>
            <img
              src=""
              alt=""
              style={{ width: '100%', height: 'auto' }}
            />
            </div>
      </div>
    </div>
  );
}

export default BaZi;